<template>
  <div class="home-body">
    <div class="nav-header">
      <div class="logo">中烟机械</div>
    </div>
    <div class="header">
      <div class="control" @click="change">
        <div v-if="control">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
        <div v-else>
          <ArrowRightOutlined />
        </div>
      </div>
      <div class="user">
        {{userName}}&nbsp;<span class="icon iconfont icon-xiajiantou"></span>
        <ul>
          <li @click="logout">
            <LogoutOutlined />
            <div class="label">退出</div>
          </li>
        </ul>
      </div>
    </div>
    <Menu />
    <div class="content" :style="!control ? 'width: 100%' : 'width: 90%' ">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  import Menu from "../../components/Menu"
  import {Modal, Button} from "ant-design-vue";
  import {listByTypes} from "../../api/dictionary";
  import {Dictionary} from "../../utils/Dictionary";
  import {ArrowRightOutlined, LogoutOutlined} from '@ant-design/icons-vue'
  export default {
      name: 'index',
      data(){
        return{
            control: true,
            open: false,
            userName: ''
        }
      },
      components:{
          Menu,
          Modal,
          Button,
          ArrowRightOutlined,
          LogoutOutlined
      },
      mounted(){
        this.loadDictionary();
        this._userInfo()
      },
      methods: {

        change(){
          this.control = !this.control;
          this.$store.commit('setToggle', this.control)
        },

        loadDictionary(){
            listByTypes(Object.keys(Dictionary).map(item => item).join(",")).then(res => {
              this.$store.commit('setDictionary', res.data);
            })
        },

        logout(){
            const self = this;
            Modal.confirm({
                title: '确定要退出么？',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    localStorage.removeItem("token");
                    self.$router.push("/")
                }
            })
        },

          /**
           * 获取用户信息
           * @param data
           * @private
           */
        _userInfo(data){
              this.$store.dispatch('getUserInfo').then(res => {
                  this.userName = res.userName;
              });
        }
      }
  }

</script>
<style lang="scss">
@import "./index.scss";
@import "../../iconfont/iconfont.css";
</style>
